<template>
    <div class="top-root">



      <el-row :gutter="10">
        <div class="top-content">
          <div>
            <h1>小程序·云开发解决方案</h1>
            <p>为企业和开发者提供一站式后端云服务，无需管理基础架构，一次开发多端运行， <br>
              腾讯云和微信联合出品。</p>
            <div>
              <el-button class="btn" type="primary">开始使用</el-button>
              <el-button class="btn1">技术文档</el-button>
            </div>
          </div>
          <div class="hidden-xs-only"></div>
        </div>
<!----------------------------------------------------------------->
        <div class="main-content">
          <div class="content">
            <div>
              <h3>一行代码，多端运行</h3>
              <p>提供一站式云端一体服务，支持小程序，Web端、移动 App 等多端创建，无需管理基础架构，为企业和开发者快速构建云原生应用。</p>
            </div>
            <div class="back">
              <img src="../../assets/img/wechat1.png" alt="">

            </div>

          </div>



        </div>
<!------------------------------------------------------------------->
        <el-col :xs="0" :sm="24" :md="24" :lg="24" :xl="24" :span="4">
          <!--------------------正常屏幕显示-------------------->
          <div class="advantage">
            <div>
              <div>
                <h3>小程序·云开发优势</h3>
              </div>
              <div class="ad-box">
                <div>
                  <div class="ad-title">云开发</div>

                  <div class="box">
                    <div class="column">
                      <div>
                        <div>高效开发</div>
                        <p>只需编写核心逻辑代码，内建小程序用户鉴权，无需关注后端配置与部署，专注于业务开发。</p>
                      </div>
                      <div>
                        <div>节约成本</div>
                        <p>按请求数和资源的运行收费，极大节约时间和成本，提供一定量免费额度使用。</p>
                      </div>
                    </div>
                    <div class="column">
                      <div>
                        <div>官方生态</div>
                        <p>只需编写核心逻辑代码，内建小程序用户鉴权，无需关注后端配置与部署，专注于业务开发。</p>
                      </div>
                      <div>
                        <div>稳定可靠</div>
                        <p>底层资源由腾讯云提供专业支持，满足不同业务场景和需求，具备快速拓展能力，确保服务稳定，数据安全。</p>
                      </div>
                    </div>
                  </div>

                </div>
                <div>
                  <div>
                    <div class="ad-title">传统开发</div>

                    <div class="box">
                      <div class="column">
                        <div>
                          <div>开发效率低</div>
                          <p>过多的非业务逻辑需要处理，导致开发效率难以提升。</p>
                        </div>
                        <div>
                          <div>资源投入高</div>
                          <p>无论是物理机托管，还是云主机维护，都需要较多的人力物力投入。</p>
                        </div>
                      </div>
                      <div class="column">
                        <div>
                          <div>产品上线慢</div>
                          <p>前后端联调、资源存储、部署等操作繁杂，上线流程耗时长。</p>
                        </div>
                        <div>
                          <div>日常运维难</div>
                          <p>需时刻关注环境运行状况，管理相关资源，运维难度大。</p>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="rno">
            <p>云开发能力详解</p>
            <div class="rno-box">
              <div>
                <div>
                  <img src="../../assets/img/icon1.svg" alt="">
                </div>
                <div>
                  <h4>云存储</h4>
                  <p>文件的存储管理，天然 CDN 加速，可以使用SDK 直接上传/下载云端文件，可视化管理。</p>
                  <div>
                    了解详情 <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <img src="../../assets/img/icon2.svg" alt="">
                </div>
                <div>
                  <h4>云存储</h4>
                  <p>文件的存储管理，天然 CDN 加速，可以使用SDK 直接上传/下载云端文件，可视化管理。</p>
                  <div>
                    了解详情 <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <img src="../../assets/img/icon3.svg" alt="">
                </div>
                <div>
                  <h4>云存储</h4>
                  <p>文件的存储管理，天然 CDN 加速，可以使用SDK 直接上传/下载云端文件，可视化管理。</p>
                  <div>
                    了解详情 <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <img src="../../assets/img/icon4.svg" alt="">
                </div>
                <div>
                  <h4>云存储</h4>
                  <p>文件的存储管理，天然 CDN 加速，可以使用SDK 直接上传/下载云端文件，可视化管理。</p>
                  <div>
                    了解详情 <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <img src="../../assets/img/icon2.svg" alt="">
                </div>
                <div>
                  <h4>云存储</h4>
                  <p>文件的存储管理，天然 CDN 加速，可以使用SDK 直接上传/下载云端文件，可视化管理。</p>
                  <div>
                    了解详情 <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <img src="../../assets/img/icon5.svg" alt="">
                </div>
                <div>
                  <h4>云存储</h4>
                  <p>文件的存储管理，天然 CDN 加速，可以使用SDK 直接上传/下载云端文件，可视化管理。</p>
                  <div>
                    了解详情 <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>



        </el-col>
        <el-col :xs="24" :sm="0" :md="0" :lg="0" :xl="0">
          <!--------------------小屏显示------------------------->
          <div class="advantage">
            <section>
              <div>
                <h5>高效开发</h5>
                <p style="color: #666;font-size: 14px; line-height: 20px;">只需编写核心逻辑代码，内建小程序用户鉴权，无需关注后端配置与部署，专注于业务开发。</p>
              </div>
              <div>
                <h5>节约成本</h5>
                <p style="color: #666;font-size: 14px; line-height: 20px;">只需编写核心逻辑代码，内建小程序用户鉴权，无需关注后端配置与部署，专注于业务开发。</p>
              </div>
              <div>
                <h5>官方生态</h5>
                <p style="color: #666;font-size: 14px; line-height: 20px;">按请求数和资源的运行收费，极大节约时间和成本，提供一定量免费额度使用。</p>
              </div>
              <div>
                <h5>稳定可靠</h5>
                <p style="color: #666;font-size: 14px; line-height: 20px;">底层资源由腾讯云提供专业支持，满足不同业务场景和需求，具备快速拓展能力，确保服务稳定，数据安全。</p>
              </div>
            </section>
          </div>

        </el-col>
      </el-row>


    </div>
</template>

<script>
    export default {
        name: "top"
    }
</script>

<style scoped>
  body{
   overflow-x: hidden;
  }
  .top-content{

    height: 340px;
    background-image: url("../../assets/img/wechat.png");
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 300px;
  }
  .top-content>div:nth-of-type(1){
      flex-basis: 100%;
      padding-left: 5%;
      min-width: 300px;

  }
  .top-content>div:nth-of-type(2){
    flex-basis: 30%;
  }
  .top-content>div>h1{
    color: white;

  }
  .top-content>div>p{
    color: white;
    margin: 20px 0;
    font-size: 14px;
  }
  .top-content .el-button{
    width: 150px;
    height: 40px;
    border-radius: 0;
  }
  .top-content .btn1{
    background-color: rgba(0,0,0,0);
    border: 1px solid white;
    color: white;
  }
  .top-content .btn1:hover{
    background-color: white;
    color: black;
  }
/* ----------------------------------------*/
  .main-content{
    width: 75%;
    margin: 0 auto;
    padding: 50px 0;
  }
  .main-content>div{
    /*display: flex;*/
  }
  .main-content .content h3{
    font-size: 32px;
    color: #000;
    font-weight: 400;
    line-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .main-content .content p{
    font-size: 16px;
    color: #666;
    margin: 20px 0 30px 0;
    line-height: 1.4;
  }
  .main-content>div:nth-of-type(1){
    text-align: center;
  }
  .main-content>div:nth-of-type(2){

  }
  .main-content .back img{
    width: 100%;
  }

/*  -----------------------------------------*/
  .top-root .advantage{
    /*height: 650px;*/
    width: 100%;
    background-color: #F5F7FA;;
  }
  .top-root .advantage>div{
    width: 75%;
    height: 100%;
    margin: 0 auto;
    padding: 30px;

  }
  .top-root .advantage>div>div:nth-of-type(1){
    text-align: center;
    font-size: 25px;
    color: #000;
    font-weight: 400;
    line-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
  }
  .top-root .advantage .ad-box{
    background-image: url("../../assets/img/vs.png");
    width: 100%;
    height: 420px;
    background-size: cover;
    background-position: center center;
  }
  .top-root .advantage .ad-box{
    display: flex;
    /*border: 1px solid red;*/
    height: 400px;
    padding: 30px;
  }
  .top-root .advantage .ad-box>div:nth-of-type(1){
    flex-basis: 60%;
  }
  .top-root .advantage .ad-box>div:nth-of-type(2){
    flex-basis: 40%;
  }
/*------------------------------*/
/*  .top-root .advantage .ad-box .box{*/
/*    width: 150px;*/
/*    display: flex;*/
/*    !*flex-wrap: wrap;*!*/
/*  }*/
  .top-root .advantage .ad-box>div:nth-of-type(1){

  }
  .top-root .advantage .ad-box .ad-title{
    color: white;
    text-align: center;
    font-size: 20px;
    width: 100%;
    height: 40px;
  }
  .top-root .advantage .ad-box .box {
    width: 90%;
    height: 316px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }
  .ad-box .box .column p{
    font-size: 14px;
    color: rgba(255,255,255,.5);

  }

  .ad-box .box .column {
    flex-basis: 100%;
    display: flex;
    justify-content: space-around;
  }
  .ad-box .box .column>div>div{
    color: white;
    margin-bottom: 15px;
  }
/*  ------------------------------------*/
  .top-root .rno{
    padding: 50px 10px;
    background-color: #F5F7FA;;
  }
  .top-root .rno>p{
    margin-bottom: 20px;
    color: #000;
    font-size: 24px;
    text-align: center;
    font-weight: 400;
    line-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-root .rno .rno-box{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

  }
  .top-root .rno .rno-box>div{
    flex-basis: 28%;
    height: 150px;
    /*width: 350px;*/
    /*height: 170px;*/
    /*border: 1px solid rebeccapurple;*/
    background-color: white;
    margin-bottom: 20px;
    padding: 15px;
    display: flex;
    justify-content: space-between;

  }
  .top-root .rno .rno-box>div>div:nth-of-type(2){
    margin-left: 10px;

  }
  .top-root .rno .rno-box>div>div:nth-of-type(2) p{
    font-size: 14px;
    color: #666;
    line-height: 24px;
  }
  .top-root .rno .rno-box>div>div:nth-of-type(2) div{
    margin-top: 10px;
    border-top: 1px solid #cccccc;
    color: #409EFF;
  }


</style>
